<template>
  <div class="home-section" :style="{ padding: `${mbConfig}px` }">
    <!-- 标题 -->
    <div class="section-title" :style="{ color: titleColor, padding: '15px', textAlign: titlePosition, fontSize: titleSize + 'px', fontWeight: 'bold' }">
      {{ title }}
      <a :href="moreLink" class="more" v-if="showMore">{{ moreText }} &gt;</a>
    </div>
    
    <!-- Banner -->
    <div class="banner-container" :style="{ paddingLeft: `${bannerLrConfig}px`, paddingRight: `${bannerLrConfig}px`, marginBottom: `${bannerMbConfig}px` }">
      <div
        class="banner-bg"
        :style="{ background: `linear-gradient(180deg,${bannerBgColor[0].item} 0%,${bannerBgColor[1].item} 100%)` }"
        v-if="bannerIsShow.val"
      ></div>
      <div class="banner-content" :style="{ height:`${bannerHeightConfig}px` }">
       
        <img :src="bannerImage" alt="Banner" v-if="bannerImage" :class="['banner-img', bannerImgStyle === 1 ? 'doc' : '']" :style="{ height:`${bannerHeightConfig}px` }"/>
        <div class="empty-banner" v-else :class="bannerImgStyle === 1 ? 'doc' : ''" :style="{ height:`${bannerHeightConfig}px` }">
          <span class="iconfont-diy icontupian"></span>
          <p>点击上传Banner图片</p>
        </div>
        <div class="banner-dots" v-if="bannerDotsShow" :class="['dot', bannerDocStyle === 1 ? 'line-dot' : bannerDocStyle === 0 ? '' : 'hidden']" :style="{ justifyContent: (bannerDotPosition === 1 ? 'center' : bannerDotPosition === 2 ? 'flex-end' : 'flex-start') }">
          <div :class="['dot-item', bannerDocStyle === 1 ? 'line_dot-item' : '']" :style="{ background: activeDot === i ? '#fff' : '#AAAAAA' }" v-for="i in bannerDotCount" :key="i"></div>
        </div>
      </div>
    </div>
    
    <!-- Menu -->
    <div class="menu-container" :style="{ backgroundColor: menuBgColor[0].item, padding: `${menuPrConfig}px` }" >
         
          <div class="menu-list" :class="menuDisplayStyle">
            <div class="menu-item" v-for="(item, index) in menuItems" :key="index" :class="menuNumber === 0 ? 'three' : menuNumber === 1 ? 'four' : 'five'">
              <div class="menu-icon" :class="[menuStyle === '圆形' ? 'circle' : menuBgStyle === 0 ? 'square-bg' : 'square', menuNumber === 0 ? 'size-three' : menuNumber === 1 ? 'size-four' : 'size-five']">
                <img :src="item.img" :alt="item.title" v-if="item.img"/>
                <div class="empty-icon" v-else>
                  <span class="iconfont-diy icontupian"></span>
                </div>
              </div>
              <p class="menu-title" v-if="item.title" :style="{ color: menuTxtColor }">{{ item.title }}</p>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'card_website',
  cname: '微官网',
  icon: 'iconcuxiaoliebiao',
  configName: 'c_card_website',
  type: 3,
  defaultName: 'cardWeb',
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray']),
    bannerImage() {
      return this.getConfig('bannerSwiperConfig.list[0].img', '')
    },
    
    bannerBgColor() {
      return this.getConfig('bannerBgColor.color', [{ item: '#FFFFFF' }, { item: '#FFFFFF' }])
    },
    
    bannerIsShow() {
      return this.getConfig('bannerIsShow', { val: true })
    },
    
    bannerLrConfig() {
      return this.getConfig('bannerLrConfig.val', 10)
    },
    
    bannerMbConfig() {
      return this.getConfig('bannerMbConfig.val', 0)
    },
    
    bannerHeightConfig() {
      return this.getConfig('bannerHeightConfig.val', 160)
    },
    
    bannerDocStyle() {
      return this.getConfig('bannerDocConfig.type', 0)
    },
    
    bannerDotPosition() {
      return this.getConfig('bannerTxtStyle.type', 0)
    },
    
    bannerImgStyle() {
      return this.getConfig('bannerImgConfig.type', 0)
    },
    
    bannerDotsShow() {
      return this.bannerDocStyle !== 2 
    },
    
    bannerDotCount() {
      return this.getConfig('bannerSwiperConfig.list.length', 1)
    },
    
    activeDot() {
      return 0 
    },
    
    menuItems() {
      const list = this.getConfig('menuListConfig.list', [])
      return list.map(item => ({
        img: item.img,
        title: item.info && item.info[0] ? item.info[0].value : '未命名'
      }))
    },
    
    menuTabConfig() {
      return this.getConfig('menuTabConfig.tabVal', 0)
    },
    
    menuRowsNum() {
      return this.getConfig('menuRowsNum.type', 0)
    },
    
    menuNumber() {
      return this.getConfig('menuNumber.type', 0)
    },
    
    menuStyle() {
      const type = this.getConfig('menuStyle.type', 0)
      const list = this.getConfig('menuStyle.list', [])
      return list[type] && list[type].val || '方形'
    },
    
    menuBgStyle() {
      return this.getConfig('menuBgStyle.type', 0)
    },
    
    menuPrConfig() {
      return this.getConfig('menuPrConfig.val', 0)
    },
    
    menuBgColor() {
      return this.getConfig('menuBgColor.color', [{ item: '#fff' }])
    },
    
    menuTxtColor() {
      return this.getConfig('menuTitleColor.color[0].item', '#333333')
    },
    
    titlePosition() {
      const type = this.getConfig('titlePosition.type', 0)
      const list = this.getConfig('titlePosition.list', [])
      return list[type] && list[type].val || 'left'
    },
    
    titleSize() {
      return this.getConfig('titleSize.val', 18)
    },
    
    menuDisplayStyle() {
      return this.menuTabConfig === 0 ? 'single-row' : 'multi-row'
    },
    
    showMore() {
      return this.getConfig('showMore.val', true)
    },
    
    moreText() {
      return this.getConfig('moreText.value', '更多')
    },
    
    moreLink() {
      return this.getConfig('moreLink.value', '')
    }
  },
  watch: {
    defaultArray: {
      handler(nVal) {
        // 配置变化时更新组件数据
        this.setConfig(nVal[this.num]);
      },
      deep: true
    },
    num: {
      handler(nVal) {
        // 组件编号变化时更新组件数据
        this.setConfig(this.defaultArray[nVal]);
      }
    }
  },

 
  data() {
    return {
      title: '我们的服务',
      titleColor: '#333333',
      mbConfig: 0,
      // showMore: true,
      // moreText: '更多',
      // moreLink: '',
      // 默认配置
      defaultConfig: {
        name: 'cardWeb',
        timestamp: this.num,
        tabConfig: {
          title: '选择样式',
          tabVal: 0,
          type: 1,
          tabList: [
            {
              name: '标题'
            },
            {
              name: '轮播'
            },
            {
              name: '菜单'
            }
          ]
        },
        titlePosition: {
          title: '标题位置',
          type: 0,
          list: [
            {
              val: 'left',
              name: '居左'
            },
            {
              val: 'center',
              name: '居中'
            },
            {
              val: 'right',
              name: '居右'
            }
          ]
        },
        titleSize: {
          title: '文字大小',
          val: 19,
          min: 12,
          max: 30,
          unit: 'px'
        },
        title: '我们的服务',
        titleConfig: {
          title: '标题文字',
          value: '我们的服务',
          max: 10
        },
        titleColor: {
          title: '标题颜色',
          default: [{ item: '#333333' }],
          color: [{ item: '#333333' }]
        },
        showMore: {
          title: '显示更多按钮',
          val: true
        },
        moreText: {
          title: '更多标题',
          value: '更多',
          max: 10
        },
        moreLink: {
          title: "链接",
          value: "",
          tips: "请输入链接",
          max: 100,
        },
        mbConfig: {
          title: '页面间距',
          val: 0,
          min: 0,
          max: 50,
          unit: 'px'
        },
        // Banner配置
        bannerSwiperConfig: {
          title: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序',
          maxList: 10,
          list: [
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '今日推荐',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            }
          ]
        },
        bannerIsShow: {
          title: '是否显示背景色',
          val: true
        },
        bannerBgColor: {
          title: '背景颜色(渐变)',
          default: [{
            item: '#FFFFFF'
          }, {
            item: '#FFFFFF'
          }],
          color: [{
            item: '#FFFFFF'
          }, {
            item: '#FFFFFF'
          }]
        },
        bannerLrConfig: {
          title: '左右边距',
          val: 10,
          min: 0,
          max: 50,
          unit: 'px'
        },
        bannerMbConfig: {
          title: '页面间距',
          val: 0,
          min: 0,
          max: 50,
          unit: 'px'
        },
        bannerDocConfig: {
          cname: 'swiper',
          title: '指示器样式',
          type: 0,
          list: [
            {
              val: '圆形',
              icon: 'iconDot',
            },
            {
              val: '直线',
              icon: 'iconSquarepoint',
            },
            {
              val: '无指示器',
              icon: 'iconjinyong',
            },
          ],
        },
        bannerTxtStyle: {
          title: '指示器位置',
          type: 0,
          list: [
            {
              val: '居左',
              icon:'icondoc_left'
            },
            {
              val: '居中',
              icon:'icondoc_center'
            },
            {
              val: '居右',
              icon:'icondoc_right'
            }
          ]
        },
        bannerImgConfig: {
          cname: 'docStyle',
          title: '轮播图样式',
          type: 0,
          list: [
            {
              val: '圆角',
              icon: 'iconPic_fillet',
            },
            {
              val: '直角',
              icon: 'iconPic_square',
            },
          ],
        },
        bannerHeightConfig: {
          title: '轮播图高度',
          val: 160,
          min: 100,
          max: 400,
          unit: 'px'
        },
        // Menu配置
        menuListConfig: {
          title: '最多可添加1张图片，建议宽度90 * 90px',
          maxList: 100,
          list: [
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '',
                  tips: '选填，不超过4个字',
                  max: 4
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100
                }
              ]
            }
          ]
        },
        menuTabConfig: {
          title: '展示样式',
          tabVal: 0,
          type: 1,
          tabList: [
            {
              name: '单行展示',
              icon: 'icondanhang'
            },
            {
              name: '多行展示',
              icon: 'iconduohang'
            }
          ]
        },
        menuRowsNum: {
          title: '显示行数',
          name: 'rowsNum',
          type: 0,
          list: [
            {
              val: '2行',
              icon: 'icon2hang'
            },
            {
              val: '3行',
              icon: 'icon3hang'
            },
            {
              val: '4行',
              icon: 'icon4hang'
            }
          ]
        },
        menuNumber: {
          title: '显示个数',
          name: 'number',
          type: 1,
          list: [
            {
              val: '3个',
              icon: 'icon3ge'
            },
            {
              val: '4个',
              icon: 'icon4ge'
            },
            {
              val: '5个',
              icon: 'icon5ge'
            }
          ]
        },
        menuStyle: {
          title: '图标样式',
          name: 'menuStyle',
          type: 1,
          list: [
            {
              val: '方形',
              icon: 'iconPic_square'
            },
            {
              val: '圆形',
              icon: 'icondayuanjiao'
            }
          ]
        },
        menuBgStyle: {
          title: '背景样式',
          name: 'bgStyle',
          type: 0,
          list: [
            {
              val: '直角',
              icon: 'iconPic_square'
            },
            {
              val: '圆角',
              icon: 'iconPic_fillet'
            }
          ]
        },
        menuPrConfig: {
          title: '背景边距',
          val: 10,
          min: 0,
          max: 50,
          unit: 'px'
        },
        menuBgColor: {
          title: '背景颜色',
          name: 'bgColor',
          default: [{
            item: '#fff'
          }],
          color: [{
            item: '#fff'
          }]
        },
       
      }
    }
  },
  methods: {
    // 通用配置获取方法
    getConfig(path, defaultValue) {
      const config = this.defaultArray[this.num] || {}
      // 解析路径，支持点表示法和数组索引
      const parts = path.split(/[\.\[\]]/).filter(part => part)
      let value = config
      for (const part of parts) {
        if (value === undefined || value === null) break
        value = value[part]
      }
      return value !== undefined && value !== null ? value : defaultValue
    },
    setConfig(data) {
      if (!data) return
      this.title = data.titleConfig && data.titleConfig.value || '我们的服务'
      this.titleColor = data.titleColor && data.titleColor.color[0].item || '#333333'
      this.mbConfig = data.mbConfig && data.mbConfig.val || 0
      // this.showMore = data.showMore && data.showMore.val || true
      // this.moreText = data.moreText && data.moreText.value || '更多'
      // this.moreLink = data.moreLink && data.moreLink.value || ''
    }
  },
  mounted() {
    // 初始化配置
    if (!this.defaultArray[this.num]) {
      this.$store.commit('mobildConfig/INITCONFIG', {
        num: this.num,
        val: this.defaultConfig
      })
    } else {
      this.setConfig(this.defaultArray[this.num])
    }
  }
}

</script>

<style scoped>
.home-section {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.section-title {
  position: relative;
}

.more {
  position: absolute;
  right: 15px;
  font-size: 14px;
  color: #999;
  font-weight: normal;
}

/* Banner样式 */
.banner-container {
  position: relative;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 8px;
}

.banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner-content, .banner-img, .empty-banner {
  height: 160px
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.banner-img.doc {
  border-radius: 0;
}

.empty-banner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.empty-banner.doc {
  border-radius: 0;
}

.empty-banner .iconfont-diy {
  font-size: 30px;
  color: #ccc;
  margin-bottom: 10px;
}

.empty-banner p {
  color: #999;
  font-size: 14px;
}

.banner-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.banner-dots.line-dot {
  bottom: 15px;
}

.banner-dots .dot-item {
  width: 5px;
  height: 5px;
  background: #AAAAAA;
  border-radius: 50%;
  margin: 0 3px;
}

.banner-dots.line-dot .line_dot-item {
  width: 8px;
  height: 2px;
  background: #AAAAAA;
  margin: 0 3px;
}

/* Menu样式 */
.menu-container {
  box-sizing: border-box;
}


.menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.menu-list.single-row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.menu-list.single-row .menu-item {
  flex: 0 0 auto;
  width: 20%;
}

.menu-item {
  flex: 1 0 calc(25% - 15px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-item.three {
  width: calc(33.3333% - 10px) !important;
  flex: none !important;
}

.menu-item.four {
  width: calc(25% - 11.25px) !important;
  flex: none !important;
}

.menu-item.five {
  width: calc(20% - 12px) !important;
  flex: none !important;
}

.menu-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  margin-bottom: 8px;
  overflow: hidden;
}

/* 根据菜单数量调整图标大小 */
.menu-icon.size-three {
  width: 100px;
  height: 100px;
}

.menu-icon.size-four {
  width: 60px;
  height: 60px;
}

.menu-icon.size-five {
  width: 50px;
  height: 50px;
}

.menu-icon.square {
  border-radius: 12px;
}

.menu-icon.circle {
  border-radius: 50%;
}
.menu-container.square-bg {
  border-radius: 0 !important;
}

.menu-container.round-bg {
  border-radius: 12px !important;
}

.menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-icon .iconfont-diy {
  font-size: 24px;
  color: #ccc;
}

.menu-title {
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  color: #ccc;
}

.menu-title {
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
</style>

<style scoped lang="scss">
.home-section {
  width: 100%;
  box-sizing: border-box;
  .section-title {
    margin: 0;
    padding: 15px 10px;
  }
  /* 确保子组件正确排列 */
  > * {
    width: 100%;
    display: block;
  }
}
</style>